<template>
  <div class="mode-wrapper">
    <div>
      <van-row gutter="10">
        <van-col
          span="6"
          v-for="item in items"
          :key="item.id"
          @click="handleModeClick(item.id)"
        >
          <div
            :class="['mode-item', activeArr.includes(item.id) ? 'active' : '']"
          >
            <div :class="['iconfont', `icon-${item.icon}`]"></div>
            <div class="text">{{ item.title }}</div>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import { device } from 'aliyun-livinglink-sdk'
import { Toast } from 'vant'
export default {
  name: 'Mode-Panel',
  props: {
    items: Array,
    mode: Number,
    deviceIdentidy: Object
  },
  data() {
    return {
      bathMode: 0,
      currentMode: 0,
      modeArr: [],
      activeArr: [],
      lastClickTime: 0 // 上一次点击时间
    }
  },
  watch: {
    mode: {
      handler(val) {
        this.bathMode = val
        if (val == 455) {
          this.activeArr = [474, 486]
          this.modeArr = [474, 486]
        } else if (val == 789) {
          this.activeArr = [474, 356]
          this.modeArr = [474, 356]
        } else {
          this.activeArr = [val]
          this.modeArr = [val]
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleModeClick(id) {
      console.log(id, 'id===========')
      // 处理点击过于频繁的方案
      const currentTime = Date.now()
      if (currentTime - this.lastClickTime < 600) {
        Toast({
          message: '点击过于频繁，请稍后再试!',
          forbidClick: true
        })
        // 回退变量的值到上一步的函数
        this.$nextTick(() => {
          this.lastClickTime = currentTime
        })
        return
      }

      this.lastClickTime = currentTime

      if (this.activeArr.includes(id)) {
        if (this.bathMode != 789 && this.bathMode != 455) {
          this.currentMode = 332
          this.bathMode = 332
          this.modeArr = [332]
          this.activeArr = [332]
          this.$emit('emitSwing', 0)
          console.log(11111)
          device.setProps(this.deviceIdentidy, { mode: 332 })
        } else if (this.bathMode == 789) {
          if (id == '474') {
            this.currentMode = 356
            this.bathMode = 356
            this.modeArr = [356]
            this.activeArr = [356]
            console.log(222)
            device.setProps(this.deviceIdentidy, { mode: 356 })
          } else {
            this.currentMode = 474
            this.bathMode = 474
            this.modeArr = [474]
            this.activeArr = [474]
            this.$emit('emitSwing', 0)
            console.log(33333)
            device.setProps(this.deviceIdentidy, { mode: 474 })
          }
        } else if (this.bathMode == 455) {
          if (id == '474') {
            this.currentMode = 486
            this.bathMode = 486
            this.modeArr = [486]
            this.activeArr = [486]
            console.log(44444)
            device.setProps(this.deviceIdentidy, { mode: 486 })
          } else {
            this.currentMode = 474
            this.bathMode = 474
            this.modeArr = [474]
            this.activeArr = [474]
            this.$emit('emitSwing', 0)
            console.log(555555)
            device.setProps(this.deviceIdentidy, { mode: 474 })
          }
        }
        this.$emit('emitUpdateMode', this.bathMode)
        return
      }

      this.bathMode = id
      this.currentMode = id

      if (id == 356 && this.arraysAreEqual(this.modeArr, [474, 486])) {
        this.modeArr = [474, 356]
      } else if (id == 486 && this.arraysAreEqual(this.modeArr, [474, 356])) {
        this.modeArr = [474, 486]
      } else {
        this.modeArr = this.addToModeArr(id)
      }

      /**
       * 换气: 474
       * 取暖: 486
       * 吹风: 356
       * 换气强暖=换气+取暖 455
       * 智能换气=换气+吹风 789
       */
      if (this.arraysAreEqual(this.modeArr, [474, 486])) {
        console.log(6666)
        device.setProps(this.deviceIdentidy, { mode: 455 })
        this.bathMode = 455
        this.activeArr = this.modeArr
      } else if (this.arraysAreEqual(this.modeArr, [474, 356])) {
        console.log(77777)
        device.setProps(this.deviceIdentidy, { mode: 789 })
        this.bathMode = 789
        this.activeArr = this.modeArr
      } else {
        if ([360, 359, 332, 474].includes(this.bathMode)) {
          this.$emit('emitSwing', 0)
        }
        console.log(8888)
        device.setProps(this.deviceIdentidy, { mode: this.bathMode })
        this.activeArr = [id]
        this.modeArr = [id]
      }

      this.$emit('emitUpdateMode', this.bathMode)
    },
    /**
     * @description 判断两个数组是否相等
     * @param {Array} a
     * @param {Array} b
     * @returns {Boolean}
     */
    arraysAreEqual(a, b) {
      const arr1 = a.sort()
      const arr2 = b.sort()
      if (arr1.length !== arr2.length) {
        return false
      }
      return arr1.every((element, index) => element === arr2[index])
    },
    /**
     * @description 将元素添加到数组，该数组只保留最新的两个元素
     * @param {String | Number} element
     * @returns {Array}
     */
    addToModeArr(element) {
      this.modeArr.push(element)
      if (this.modeArr.length > 2) {
        this.modeArr.shift()
      }

      return this.modeArr
    }
  }
}
</script>
<style lang="less" scoped>
.mode-wrapper {
  background: #fff;
  padding: 16px 13px;
  margin-bottom: 10px;
  box-sizing: border-box;
  .mode-item {
    border: 1px solid #ebebeb;
    border-radius: 5px;
    padding: 19px 0 10px 0;
    margin-bottom: 10px;
    text-align: center;
    .text {
      color: #4a5a78;
      font-size: 14px;
      margin-top: 9px;
    }
    .iconfont {
      color: var(--primary-color);
      font-size: 24px;
    }
  }
  .mode-item.active {
    border: 1px solid var(--primary-color);
    background-color: #f2f9ff;
  }
}
</style>
